<template>
	<view>
		<view class="message-content">
			<view class="flex" @click="onListenMessage">
				<view>
					<span v-if="item.type == 1" class="mark-icon-class" style="font-size: 100rpx;color: red;">&#xe685;</span>
					<span v-if="item.type == 3 || item.type == 4" 
					class="mark-icon-class" style="font-size: 100rpx;color: #38C160;">&#xe60f;</span>
					<span v-if="item.type == 5" class="mark-icon-class" style="font-size: 100rpx;color: #F9B92A;">&#xe604;</span>
					<image class="avatar_max" v-if="item.type == 2" :src="item.img" mode=""></image>
				</view>
				<view style="margin-left: 20rpx">
					<view class="flex" style="justify-content: space-between;">
						<view style="width: 70%;">
							<sunui-omitted sty="font-size:36rpx;" :clamp="1" :text="item.title" />
						</view>
						<view class="grey-sub-text" style="font-size: 28rpx;">
							{{ item.startDay }}
						</view>
					</view>
					<view class="grey-sub-text" style="margin-top: 15rpx;">
						<sunui-omitted sty="font-size:28rpx;" :clamp="1" :text="item.desc" />
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	/**
	 * type = 1 收入
	 * 2 回复
	 * 3、4 成功
	 * 5 失败
	 */
	export default {
		props: {
			item: {
				type: Object,
				default: () => {}
			},
		},
		data() {
			return {
			};
		},
		methods: {
			onListenMessage() {
				if(this.item.type == 2){
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	
	.message-content{
		padding: 30rpx 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		background-color: white;
		margin-bottom: 10rpx;
	}
	
	.avatar_max{
		height: 100rpx;
		width: 100rpx;
		border-radius: 50%;
	}

</style>
